<template>
    <a-page-header @back="handleBack">
        <template #title> {{ detail.systemName }} </template>
        <template #tags>
            <flexbox justify="flex-start" align="center" style="margin-left: 12px">
                <a-tag v-if="detail.versionNumber">{{ detail.versionNumber }}</a-tag>
                <a-tag>{{ $filters.dateFilter(detail.createTime) }} ~ {{ $filters.dateFilter(detail.endTime) || '至今' }}</a-tag>
                <a-tag color="blue">{{ $filters.systemStatusFilter(detail.status) }}</a-tag>
            </flexbox>
        </template>
        <div class="profile-header">
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="18">
                        <a-row :gutter="6">
                            <a-col :span="6">
                                <a-form-item label="系统标识">
                                    {{ form.systemTag }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="系统类型">
                                    {{ $filters.valToNameFilter('systemType', form.systemType) }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="所属项目" name="belong">
                                    {{ $filters.valToNameFilter('belong', form.belong) }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="标签" name="pmpLabels">
                                    <a-tag color="blue" v-for="item of form.pmpLabels" :key="item.id">
                                        {{ item.name }}
                                    </a-tag>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="产品经理">
                                    {{ form.pmpSystemManagers['产品经理'] }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="需求管理员">
                                    {{ form.pmpSystemManagers['需求管理员'] }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="研发经理">
                                    {{ form.pmpSystemManagers['研发经理'] }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="测试经理">
                                    {{ form.pmpSystemManagers['测试经理'] }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="观察者">
                                    {{ form.pmpSystemManagers['观察者'] }}
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-form-item label="产品类型">
                                    {{ $filters.systemProductTypeFilter(form.productType) }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="产品目录类型">
                                    {{ $filters.catalogTypeFilter(form.catalogType) }}
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="产品简介" name="requireName">
                                    <div style="white-space: pre-wrap" v-html="form.systemIntroduce" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-page-header>
</template>

<script lang="ts">
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    name: 'ProductHeader',
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    setup(props) {
        const { handleBack } = useRouterApi({
            backQuery: {
                path: '/version/versionList'
            }
        });
        const form = ref<any>({
            systemIntroduce: '',
            belong: '',
            systemType: '',
            pmpLabels: [],
            systemTag: '',
            pmpSystemManagers: {
                产品经理: '',
                研发经理: '',
                需求管理员: '',
                测试经理: '',
                观察者: ''
            },
            productType: '',
            catalogType: ''
        });
        const init = () => {
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'pmpSystemManagers') {
                    const keys = Object.keys(props.detail.pmpSystemManagers);
                    if (keys.length) {
                        keys.forEach((key) => {
                            const managers = props.detail.pmpSystemManagers[key].map((item) => item.empName);
                            form.value.pmpSystemManagers[key] = managers.join(',');
                        });
                    }
                } else {
                    form.value[key] = props.detail[key];
                }
            });
        };
        init();
        return {
            form,
            handleBack
        };
    }
});
</script>
<style scoped lang="less">
.profile-header {
    background: url('~@/assets/product/profileBg.png') no-repeat center right;
}
</style>